<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心1</title>
    <link rel="stylesheet" href="./assets/css/reset.css">
    <link rel="stylesheet" href="./libs/css/frozenui.css">
    <link rel="stylesheet" href="./assets/css/common.css">
    <link rel="stylesheet" href="./assets/css/my1.css">
</head>

<body>
    <div class="container">
        <header>
            <div class="header content">
                <h2 class="pull-left">我的</h2>
                <a href="" class="pull-right setting iconfont">&#xe61d;</a>
                <div class="clearfix"></div>

                <!-- 个人信息 -->
                <div class="user">
                    <ul class="ui-list ui-list-link ui-list-single ui-border-tb">
                        <li>
                            <div class="ui-avatar-s">
                                <img src="./assets/images/teacher.png" alt="">
                            </div>
                            <div class="ui-list-info ui-border-t">
                                <h4 class="ui-nowrap">
                                    love_三好教育
                                    <p>修改个人资料</p>
                                </h4>
                            </div>
                        </li>
                    </ul>

                    <ul class="ui-row info">
                        <li class="ui-col ui-col-50">
                            <h4><span>100</span>&nbsp;个</h4>
                            <p>学习金</p>
                        </li>
                        <li class="ui-col ui-col-50">
                            <h4><span>15</span>&nbsp;张</h4>
                            <p>优惠券</p>
                        </li>
                    </ul>
                </div>
            </div>
        </header>

        <section>
            <ul class="ui-row menu">
                <li class="ui-col ui-col-25">
                    <img src="./assets/images/history.png" alt="">
                    <p>课程历史</p>
                </li>
                <li class="ui-col ui-col-25">
                    <img src="./assets/images/order.png" alt="">
                    <p>我的订单</p>
                </li>
                <li class="ui-col ui-col-25">
                    <img src="./assets/images/course.png" alt="">
                    <p>我的课程</p>
                </li>
                <li class="ui-col ui-col-25">
                    <img src="./assets/images/cash.png" alt="">
                    <p>学习金兑换</p>
                </li>
                <li class="ui-col ui-col-25">
                    <img src="./assets/images/history.png" alt="">
                    <p>课程历史</p>
                </li>
                <li class="ui-col ui-col-25">
                    <img src="./assets/images/order.png" alt="">
                    <p>我的订单</p>
                </li>
                <li class="ui-col ui-col-25">
                    <img src="./assets/images/course.png" alt="">
                    <p>我的课程</p>
                </li>
                <li class="ui-col ui-col-25">
                    <img src="./assets/images/cash.png" alt="">
                    <p>学习金兑换</p>
                </li>
                <li class="ui-col ui-col-25">
                    <img src="./assets/images/history.png" alt="">
                    <p>课程历史</p>
                </li>
                <li class="ui-col ui-col-25">
                    <img src="./assets/images/order.png" alt="">
                    <p>我的订单</p>
                </li>
                <li class="ui-col ui-col-25">
                    <img src="./assets/images/course.png" alt="">
                    <p>我的课程</p>
                </li>
                <li class="ui-col ui-col-25">
                    <img src="./assets/images/cash.png" alt="">
                    <p>学习金兑换</p>
                </li>
            </ul>
        </section>

        <section>
            <h3 class="title content">其他</h3>
            <ul class="ui-row menu last-menu">
                <li class="ui-col ui-col-25">
                    <img src="./assets/images/history.png" alt="">
                    <p>使用帮助</p>
                </li>
            </ul>
        </section>
    </div>

    <nav>
        <div class="nav">
            <ul>
                <!-- 父标签设置弹性布局 -->
                <li>
                    <!-- li标签可以比作div盒子标签 -->
                    <a href="index.html">
                        <img src="./assets/images/home.png" alt="">
                        <p>首页</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./assets/images/dianbo.png" alt="">
                        <p>点播</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./assets/images/question.png" alt="">
                        <p>题目</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="./assets/images/live.png" alt="">
                        <p>直播</p>
                    </a>
                </li>
                <li>
                    <a href="my1.html">
                        <img src="./assets/images/my_hover.png" alt="">
                        <p>我的</p>
                    </a>
                </li>
            </ul>
        </div>
    </nav>


</body>

</html>